<template>
    <div>
        <div class="list-box">
            <el-collapse v-model="activeName">
                <el-collapse-item :name="index" v-for="(item, index) in list" :key="index">
                    <div class="flex" slot="title" style="justify-content: space-between;width: 100%;">
                        <div class="cu-title" @click.stop>
                            <el-radio-group style="margin-right: 20px;" v-model="radio" class="ml-4" >
                                <el-radio label="1" size="large" >设备数据过滤</el-radio>
                            </el-radio-group>
                            <!-- <div class="item">
                                <el-radio-group v-model="item.deviceRadio" size="small" @input="handleEmits" fill="#7367F0">
                                    <el-radio-button label="指定设备"></el-radio-button>
                                    <el-radio-button label="当前设备"></el-radio-button>
                                </el-radio-group>
                            </div> -->
                            <div class="item" v-if="item.deviceRadio === '指定设备'">
                                <select-device :indexes="index" placeholder="选择设备" :dn="item.dn" :pk="item.pk"
                                    @handleEmits="hadnleSelectDevice"></select-device>
                            </div>
                        </div>
                        <div style="padding-right: 10px;">
                            <el-button @click="removeFliter(index)" size="small">删除</el-button>
                        </div>
                    </div>
                    <!-- v-if="item.dn || item.deviceRadio === '当前设备'" -->
                    <div class="condition-box" >
                        <div class="main">
                            <div class="title">条件</div>
                            <div class="main-box">
                                <div class="box" v-for="(cond, condIndex) in item.conditions" :key="condIndex">
                                    <div class="item">
                                        <el-row style="width: 100%;">
                                            <el-col :span="7">
                                                <el-select v-model="cond.identifier" placeholder="请选择" size="small"
                                                    v-if="item.deviceRadio !== '当前设备'"
                                                    @change="(e) => conditionChange(cond, index, e, condIndex)">
                                                    <el-option-group v-for="group in options" :key="group.name"
                                                        :label="group.name">
                                                        <el-option v-for="item in group.items" :key="item.identifier"
                                                            :label="item.name" :value="item.identifier">
                                                        </el-option>
                                                    </el-option-group>
                                                </el-select>
                                                <el-select v-else v-model="cond.type" @change="handleEmits"
                                                    size="small">
                                                    <el-option label="设备属性" value="property" key="property" />
                                                    <!-- <el-option label="设备标签" value="tag" key="tag" /> -->
                                                </el-select>
                                            </el-col>
                                            <el-col :span="5" v-if="item.deviceRadio === '当前设备'">
                                                <el-input v-model="cond.identifier" auto-complete="off" size="small" @input="handleEmits"/>
                                            </el-col>
                                            <el-col :span="10">
                                                <el-row class="param-item">
                                                    <el-col :span="8">
                                                        <el-select v-model="cond.comparator" size="small" @change="handleEmits">
                                                            <el-option v-for="cp in comparators" :label="cp.name"
                                                                :value="cp.value" :key="cp.value" />
                                                        </el-select>
                                                    </el-col>
                                                    <el-col :span="10">
                                                        <el-input v-model="cond.value" auto-complete="off" @input="handleEmits"
                                                            size="small" />
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <el-button type="danger" size="mini" icon="el-icon-delete"
                                        style="margin-left: 10px;" @click="handleRemoveCondition(item, condIndex)" />
                                </div>
                            </div>
                        </div>
                        <el-button type="primary" size="small" style="margin-top: 12px;"
                            @click="handleAddCondition(item)">新增条件</el-button>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-button style="margin-top: 10px;" type="primary" size="small" @click="handleAdd">新增过滤器</el-button>
    </div>
</template>
<script>
//   import { getObjectModel } from '@/views/iot/equipment/api/products.api'
import SelectDevice from '@/components/rule/select-device.vue'
import { reqByProductKey } from "@/api/rule";

export default {
    name: 'YourComponent',
    components: {
        SelectDevice,
    },
    props: {
        filters: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            radio: '1',
            arr: [],
            activeName: [],
            list: [
                //  {
                //         type: "device",//类型：设备device
                //     pk: "",//产品id
                //     dn:"",//设备名称
                //     config:"",
                //     deviceRadio:"指定设备",
                //     conditions:[
                //         {
                //             parameters:"",//参数集合
                //             type:"",//标识类型
                //             comparator:"",//算数符
                //             identifier:"",//标识
                //             value:"",//标识值
                //         }
                //     ]
                // }
            ],
            stateMap: new Map(),
            comparators: [
                { name: '大于', value: '>' },
                { name: '等于', value: '==' },
                { name: '小于', value: '<' },
                { name: '不等于', value: '!=' },
                { name: '包含', value: 'in' },
                { name: '不包含', value: 'notin' },
                { name: '相似', value: 'like' },
                { name: '任意', value: '*' },
            ],
            options: []
        };
    },
    created() {
        this.initialize();        
    },
    watch: {
        'list.length': {
            handler() {
                this.handleEmits();
            },
        }
    },
    methods: {
        initialize() {
            for (let i = 0; i < 100; i++) {
                this.arr.push(i);
            }
            this.activeName = this.arr;
        },
        // 选择设备
        hadnleSelectDevice(product) {
            console.log(product,'product');
            if (!product.imei) return;
            this.list[product.index].dn = product.imei;//设备名称
            // this.list[product.index].pk = product.deviceType;//产品类型
            this.onThingModel(product)// 获取物模型
        },
        // 获取物模型
        async onThingModel(product) {
            let res = await reqByProductKey(product.deviceType);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            let { data } = res.data;
            // console.log(data, 'data');
            this.options = []
            let items = []
            if(data==null){
                this.handleEmits()
                return
            }
            this.options.push({
                name: '属性',
                items: items,
            })
            data.model.properties.forEach(item => {
                items.push({
                    type: 'property',
                    identifier: item.identifier,
                    name: item.name,
                })
            })
            this.options.push({
                name: '状态',
                items: [
                    {
                        type: 'state',
                        identifier: 'online',
                        name: '是否在线',
                    },
                ],
            })
            this.handleEmits()
        },
        // 更新数据
        handleEmits() {
            // this.list = this.list.map((item) => {
            //     item.config = JSON.stringify(item);
            //     return item
            // });
            // console.log(this.list,'11112221');
            this.$emit('onfiltera', this.list);
        },
        // 新增过滤器
        handleAdd() {
            this.list.push({
                type: "device",//类型：设备device
                deviceRadio: '指定设备',
                conditions: [
                    {
                        parameters: []
                    }
                ]
            });
        },
        // 删除过滤器
        removeFliter(index) {
            this.list.splice(index, 1);
        },
        // 你需要确保getObjectModel函数是在你的组件中定义或者从其他地方引入的
        getObjectModel(pk) {
            // 返回一个Promise
        },
        // 新增条件
        handleAddCondition(item) {
            if (!item.conditions) item.conditions = [];
            item.conditions.push({});
            this.handleEmits()
        },
        // 删除条件
        handleRemoveCondition(item, index) {
            item.conditions.splice(index, 1);
            this.handleEmits()
        },
        // 删除参数
        removeParmeter(index, cond) {
            cond.parameters.splice(index, 1);
        },
        // 选择条件
        conditionChange(cond, index, e, condIndex) {
            // console.log(cond, index, e);
            // console.log(this.list);
            // console.log(this.list[index].conditions[condIndex]);
            this.options.forEach(item => {
                item.items.forEach(item2 => {
                    if (item2.identifier == e) {
                        this.list[index].conditions[condIndex].type = item2.type || ''
                    }
                })
            })
            this.handleEmits()
        },
        // 编辑
        getList() {
            this.list = this.filters.map((item) => {
                if (item.config) {
                    // 编辑
                    item = JSON.parse(item.config || '{}')
                }
                return item
            })
            console.log(this.list, 'list');
        },
        getDestroy() {
            this.list = [];
        },
    },
    // Vue 2 生命周期钩子，组件销毁前清理
    beforeDestroy() {
    },
};
</script>

<style lang="less" scoped>
.list-box {
    margin-top: 10px;

    .cu-title {
        width: calc(100% - 30px);
        cursor: auto;
        display: flex;
        align-items: center;

        .item {
            width: 250px;
            margin-right: 10px;
        }
    }
}

::v-deep(.el-collapse-item__header) {
    background-color: #f2f2f2;
    padding: 0 12px;
}

.condition-box {
    background-color: @ruleBgcolor;
    padding: 15px;
    border-top: @ruleBgcolor3;

    .main {
        border: @ruleBgcolor2;

        .title {
            padding: 12px;
            color: @ruleColor;
            font-weight: 600;
            border-bottom: @ruleBgcolor3;
        }

        .main-box {
            padding: 10px;

            .box {
                display: flex;
                align-items: center;
                margin-bottom: 8px;

                .item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 0px;
                    flex: 1;

                    .param-item {
                        // margin-bottom: 8px;
                    }
                }

            }
        }
    }
}

.flex {
    display: flex;
}

// 折叠
.el-collapse {
    border-top: none;
    border-bottom: none;
    border-radius: 5px !important;
}

::v-deep .el-collapse-item__header {
    color: #8299c9;
    font-size: 14px;
    background-color: @ruleBgcolor !important;
    border: none;
    border-radius: 5px !important;
    padding: 0 12px;
}

::v-deep .el-collapse-item__content {
    color: #fff;
    font-size: 13px;
    border: none !important;
    //   padding: 10px 0 10px 10px;
    background-color: transparent !important;
    border-radius: 0 0 5px 5px !important;
}

::v-deep .el-collapse-item__wrap {
    border: none;
    background-color: transparent;
}

// 折叠结束

// 设备数据过滤单选按钮
::v-deep .el-radio__input.is-checked .el-radio__inner{
  border-color: #7367F0;
  background: #7367F0;
}
::v-deep .el-radio__input.is-checked+.el-radio__label{
  color: #7367F0;
}
::v-deep .el-radio:last-child{
  display: flex;
}
</style>